<template>
  <el-drawer
    title="资源列表"
    :append-to-body="true"
    :before-close="handleDrawerClose"
    custom-class="demo-drawer"
    :visible.sync="innerDrawer"
  >
    <template>
      <div class="demo-drawer__content">
        <el-table
          :data="tableresourceData"
          border
          @row-click="singleSelect"
          style="width: 100%"
        >
          <el-table-column label="" width="45">
            <template v-slot="scope">
              <el-radio
                class="radio"
                v-model="resourceradio"
                :label="scope.$index"
                >{{ null }}</el-radio
              >
            </template>
          </el-table-column>

          <el-table-column prop="resourceName" label="资源名称" width="180">
          </el-table-column>
          <el-table-column prop="ip" label="资源IP" width="180">
          </el-table-column>
          <el-table-column prop="port" label="资源端口"> </el-table-column>
        </el-table>
        <div class="demo-drawer__footer">
          <el-button @click="handleDrawerClose">取 消</el-button>
          <el-button type="primary" @click="sumbitDrawer">确 定</el-button>
        </div>
      </div>
    </template>
  </el-drawer>
</template>

<script>
export default {
  components: {},
  props: {
    innerDrawer: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      resourceradio: "",
      singleSelectRow: {},
      tableresourceData: [
        {
          resourceName: "1号服务器",
          ip: "192.168.2.36",
          port: "8848",
          user: "admin",
        },
        {
          resourceName: "网络密码机",
          ip: "192.168.10.177",
          port: "5563",
          user: "admin123",
        },
      ],
      // innerDrawer: false,
    };
  },
  watch: {},
  computed: {},
  methods: {
    sumbitDrawer() {
      console.log(this.singleSelectRow, "------------------");
      // this.vpnform.resource = this.singleSelectRow.name;
      // this.vpnform.ip = this.singleSelectRow.address;
      this.$emit("getrow", this.singleSelectRow);
      this.$emit("update:innerDrawer", false);
      this.singleSelectRow = {};
      this.resourceradio = "";
    },
    singleSelect(row, column) {
      console.log(this.resourceradio, column);
      this.resourceradio = this.tableresourceData.indexOf(row);
      // console.log(this.resourceradio);
      this.singleSelectRow = row;
      console.log(this.singleSelectRow);
    },
    // getresource() {
    //   this.$emit('update:innerDrawer',true)
    //   // this.innerDrawer = true;
    // },
    handleDrawerClose() {
      this.$emit("update:innerDrawer", false);
      this.singleSelectRow = {};
      this.resourceradio = "";
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
::v-deep .el-drawer {
  min-width: 600px;
  .el-drawer__body {
    padding: 0 15px;
  }
  .demo-drawer__footer {
    margin-top: 16px;
    text-align: end;
  }
}
</style>
